<template>
  <md-page title="队伍列表" isBtn :btnTextItems="data.btnTextItems" @btnClick="bottomBtnClick">
    <view class="container">
      <view class="top-card">
        <view class="flex-b title">
          <view class="flex-l flex-1 ellipsis-1">{{ data.query.title }}</view>
          <view class="flex-1 right">
            {{ data.query.group_name }}
            <text class="m-left-20">{{ `${data.query?.sign_min_num || 0}/${data.query?.sign_max_num || 0}人` }}</text>
          </view>
        </view>
        <view class="remark" v-if="data.query?.remark">备注：{{ data.query.remark }}</view>
      </view>
      <view v-for="item in data.list" :key="item.id">
        <view class="card">
          <image class="image" mode="aspectFill" :src="item.avatar" />
          <view class="info flex-l m-left-20">
            <view>{{ item.truename }}</view>
            <view>{{ item.sex === 1 ? '男' : '女' }}</view>
            <view>{{ item.age }}岁</view>
          </view>
        </view>
      </view>
    </view>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// 接口
import { interactionMemberList } from '@/api';
import { parseParams, stringifyParams } from '@/utils/util';
import { fromType } from '@/api/enum';

const data = reactive<any>({
  btnTextItems: [{ text: '加入队伍', key: 'join' }],
  list: [],
  query: {},
  refresh: false,
});

// 按钮回调
const bottomBtnClick = async () => {
  uni.showModal({
    title: '提示',
    content: '是否加入该队伍？',
    success(res) {
      if (res.confirm) {
        // 传递的参数
        const _params = stringifyParams({
          type: 'member',
          sign_team_id: data.query?.sign_team_id,
          active_id: data.query?.active_id,
          from: fromType.组队大厅,
        });
        uni.navigateTo({
          url: `/pages/registration/index?params=${_params}`,
        });
      }
    },
  });
};

/**
 * 队伍列表
 */
const fetchMemberList = async (params: { sign_team_id: string }) => {
  try {
    const res = await interactionMemberList(params);
    data.list = res.data;
  } catch (err) {}
};

onLoad(async options => {
  const params = parseParams(options?.params);
  data.query = params;
  if (!data.refresh) {
    fetchMemberList({ sign_team_id: params?.sign_team_id || '-1' });
  }
});

onShow(() => {
  data.refresh && fetchMemberList({ sign_team_id: data.query?.sign_team_id || '-1' });
  data.refresh = true;
});
</script>

<style lang="scss" scoped>
.container {
  background: #ffffff;

  .top-card {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: $fs-28;
    border-top: 1rpx solid #f3f3f3;
    border-bottom: 1rpx solid #f3f3f3;
    .title {
      .right {
        text-align: right;
      }
    }
    .remark {
      margin-top: 10rpx;
      color: #999999;
    }
  }

  .card {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    &:not(:last-child) {
      margin-bottom: 20rpx;
    }
    .image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 20rpx;
      background: #f3f3f3;
    }
    .info {
      flex: 1;
      height: 150rpx;
      border-bottom: 1px solid #f3f3f3;
      gap: 20rpx;
      font-size: $fs-34;
      & > view {
        flex: 1;
      }
    }
  }
}
</style>
